<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <div class="info"></div>
  </div>

  <script>
    const obj = {
      message: '消息'
    }

    let objMsg = 'init'

    // 数据劫持
    Object.defineProperty(obj, 'message', {
      // 当调用 obj.message 获取值的时候，会调用该 getter 方法
      get() {
        return objMsg
      },
      // 当调用 obj.message = 'xxx' 设置值的时候，会调用该 setter 方法
      // 所赋值作为方法的参数传递
      set(newValue) {
        objMsg = newValue
        show()
      }
    })

    function show() {
      document.querySelector('.info').innerHTML = obj.message
    }

    show()
  </script>
</body>
</html>